<template>
  <div class="goods">
    <mianbaoxie />
    <el-card class="box-card">
      <div style="margin-bottom:10px" class="topsarch">
        <el-input placeholder="请输入内容" v-model="paging.query" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="serch"></el-button>
        </el-input>
        <el-button type="primary" @click="add">添加商品</el-button>
      </div>
      <el-table :data="goodslist" style="width: 100%" border>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="670"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="90"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="130"></el-table-column>
        <el-table-column prop="add_time" label="商品创建时间" width="170" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="getitem(scope.row)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="paging.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-dialog title="修改商品" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <span>
          <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品" prop="goods_name" :rules="[
      { required: true, message: '商品名称不能为空'},
    ]">
              <el-input type="text" v-model.number="numberValidateForm.goods_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="goods_price" :rules="[
      { required: true, message: '价格不能为空'},
      { type: 'number', message: '价格必须为数字值'}
    ]">
              <el-input type="number" v-model.number="numberValidateForm.goods_price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="goods_number" :rules="[
      { required: true, message: '数量不能为空'},
      { type: 'number', message: '数量必须为数字值'}
    ]">
              <el-input type="number" v-model.number="numberValidateForm.goods_number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重量" prop="goods_weight" :rules="[
      { required: true, message: '重量不能为空'},
      { type: 'number', message: '重量必须为数字值'}
    ]">
              <el-input type="number" v-model.number="numberValidateForm.goods_weight" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upda">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import mianbaoxie from "../components/mianbaoxie.vue";
import { initgoods, deleteitem, getitem, updataitem } from "@/ulits/api/goods";
export default {
  components: { mianbaoxie },
  name: "goods",
  data() {
    return {
      // 一共几条数据
      total: 0,
      // 分页参数
      paging: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      // 初始数据
      goodslist: [],
      // 修改弹出框
      dialogVisible: false,
      // 修改from表单
      numberValidateForm: {
        goods_name: "",
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
      },
    };
  },
  methods: {
    // 每页有几条
    handleSizeChange(val) {
      this.paging.pagesize = val;
      this.updatagoods();
    },
    // 第几页
    handleCurrentChange(val) {
      this.paging.pagenum = val;
      this.updatagoods();
    },
    // 删除
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row);
          deleteitem(row.goods_id).then((res) => {
            this.Message(res);
            this.updatagoods();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 搜索
    serch() {
      this.updatagoods();
    },
    // 添加
    add() {
      this.$router.push("/goods/add");
    },
    // 修改数据回填
    getitem(row) {
      getitem(row.goods_id).then((res) => {
        this.numberValidateForm = res.data;
      });
      this.dialogVisible = true;
    },
    // 确认修改
    upda() {
      updataitem(this.numberValidateForm).then((res) => {
        console.log(res);
        this.Message(res);
        this.updatagoods();
      });
      this.dialogVisible = false;
    },
    // 关闭修改弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 时间转换
    dateFormat(row, column) {
      var moment = require("moment");
      var date = row[column.property];
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 获取数据
    updatagoods() {
      initgoods(this.paging).then((res) => {
        this.total = res.data.total;
        this.goodslist = res.data.goods;
      });
    },
  },
  created() {
    // 初始化数据
    initgoods(this.paging).then((res) => {
      this.total = res.data.total;
      this.goodslist = res.data.goods;
      this.Message(res);
    });
  },
};
</script>

<style lang="scss" scoped>
.goods {
  .topsarch {
    .el-input-group {
      width: 40%;
      margin-right: 15px;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
  }
}
</style>